<template>
  <div class="card">
    <p class="mb-10">
      <a href="https://github.com/IanLunn/Hover" target="_blank">
        CSS3
        驱动的悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用到您自己的元素、修改或仅用于获取灵感。可用于
        CSS、Sass 和 LESS。
      </a>
    </p>
    <h2 class="mb-10">2D Transitions</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-grow" size="large">Grow</el-button>
      <el-button class="mb-10 hvr-shrink" size="large">Shrink</el-button>
      <el-button class="mb-10 hvr-pulse" size="large">Pulse</el-button>
      <el-button class="mb-10 hvr-pulse-grow" size="large">Pulse Grow</el-button>
      <el-button class="mb-10 hvr-pulse-shrink" size="large">Pulse Shrink</el-button>
      <el-button class="mb-10 hvr-push" size="large">Push</el-button>
      <el-button class="mb-10 hvr-pop" size="large">Pop</el-button>
      <el-button class="mb-10 hvr-bounce-in" size="large">Bounce In</el-button>
      <el-button class="mb-10 hvr-bounce-out" size="large">Bounce Out</el-button>

      <el-button class="mb-10 hvr-rotate" size="large">Rotate</el-button>
      <el-button class="mb-10 hvr-grow-rotate" size="large">Grow Rotate</el-button>
      <el-button class="mb-10 hvr-float" size="large">Float</el-button>
      <el-button class="mb-10 hvr-sink" size="large">Sink</el-button>
      <el-button class="mb-10 hvr-bob" size="large">Bob</el-button>
      <el-button class="mb-10 hvr-hang" size="large">Hang</el-button>
      <el-button class="mb-10 hvr-skew" size="large">Skew</el-button>
      <el-button class="mb-10 hvr-skew-forward" size="large">Skew Forward</el-button>
      <el-button class="mb-10 hvr-skew-backward" size="large">Skew Backward</el-button>

      <el-button class="mb-10 hvr-wobble-vertical" size="large">Wobble Vertical</el-button>
      <el-button class="mb-10 hvr-wobble-horizontal" size="large">Wobble Horizontal</el-button>
      <el-button class="mb-10 hvr-wobble-to-bottom-right" size="large"
        >Wobble To Bottom Right</el-button
      >
      <el-button class="mb-10 hvr-wobble-to-top-right" size="large">Wobble To Top Right</el-button>
      <el-button class="mb-10 hvr-wobble-top" size="large">Wobble Top</el-button>
      <el-button class="mb-10 hvr-wobble-bottom" size="large">Wobble Bottom</el-button>
      <el-button class="mb-10 hvr-wobble-skew" size="large">Wobble Skew</el-button>
      <el-button class="mb-10 hvr-buzz" size="large">Buzz</el-button>
      <el-button class="mb-10 hvr-buzz-out" size="large">Buzz Out</el-button>
      <el-button class="mb-10 hvr-forward" size="large">Forward</el-button>
      <el-button class="mb-10 hvr-backward" size="large">Backward</el-button>
    </div>
    <h2 class="mb-10">Background Transitions</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-fade" size="large">Fade</el-button>
      <el-button class="mb-10 hvr-back-pulse" size="large">Back Pulse</el-button>
      <el-button class="mb-10 hvr-sweep-to-right" size="large">Sweep To Right</el-button>
      <el-button class="mb-10 hvr-sweep-to-left" size="large">Sweep To Left</el-button>
      <el-button class="mb-10 hvr-sweep-to-bottom" size="large">Sweep To Bottom</el-button>
      <el-button class="mb-10 hvr-sweep-to-top" size="large">Sweep To Top</el-button>
      <el-button class="mb-10 hvr-bounce-to-right" size="large">Bounce To Right</el-button>
      <el-button class="mb-10 hvr-bounce-to-left" size="large">Bounce To Left</el-button>
      <el-button class="mb-10 hvr-bounce-to-bottom" size="large">Bounce To Bottom</el-button>

      <el-button class="mb-10 hvr-bounce-to-top" size="large">Bounce To Top</el-button>
      <el-button class="mb-10 hvr-radial-out" size="large">Radial Out</el-button>
      <el-button class="mb-10 hvr-radial-in" size="large">Radial In</el-button>
      <el-button class="mb-10 hvr-rectangle-in" size="large">Rectangle In</el-button>
      <el-button class="mb-10 hvr-rectangle-out" size="large">Rectangle Out</el-button>
      <el-button class="mb-10 hvr-shutter-in-horizontal" size="large"
        >Shutter In Horizontal</el-button
      >
      <el-button class="mb-10 hvr-shutter-out-horizontal" size="large"
        >Shutter Out Horizontal</el-button
      >
      <el-button class="mb-10 hvr-shutter-in-vertical" size="large">Shutter In Vertical</el-button>
      <el-button class="mb-10 hvr-shutter-out-vertical" size="large"
        >Shutter Out Vertical</el-button
      >
    </div>
    <h2 class="mb-10">Icons</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-icon-back" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Back
      </el-button>
      <el-button class="mb-10 hvr-icon-forward" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Forward
      </el-button>
      <el-button class="mb-10 hvr-icon-down" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Down
      </el-button>
      <el-button class="mb-10 hvr-icon-up" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Up
      </el-button>
      <el-button class="mb-10 hvr-icon-spin" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Spin
      </el-button>
      <el-button class="mb-10 hvr-icon-drop" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Drop
      </el-button>
      <el-button class="mb-10 hvr-icon-fade" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Fade
      </el-button>
      <el-button class="mb-10 hvr-icon-float-away" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Float Away
      </el-button>
      <el-button class="mb-10 hvr-icon-sink-away" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Sink Away
      </el-button>
      <el-button class="mb-10 hvr-icon-grow" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Grow
      </el-button>
      <el-button class="mb-10 hvr-icon-shrink" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Shrink
      </el-button>
      <el-button class="mb-10 hvr-icon-pulse" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Pulse
      </el-button>
      <el-button class="mb-10 hvr-icon-pulse-grow" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Pulse Grow
      </el-button>
      <el-button class="mb-10 hvr-icon-pulse-shrink" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Pulse Shrink
      </el-button>
      <el-button class="mb-10 hvr-icon-push" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Push
      </el-button>
      <el-button class="mb-10 hvr-icon-pop" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Pop
      </el-button>
      <el-button class="mb-10 hvr-icon-bounce" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Bounce
      </el-button>
      <el-button class="mb-10 hvr-icon-rotate" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Rotate
      </el-button>
      <el-button class="mb-10 hvr-icon-grow-rotate" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Grow Rotate
      </el-button>
      <el-button class="mb-10 hvr-icon-float" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Float
      </el-button>
      <el-button class="mb-10 hvr-icon-sink" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Sink
      </el-button>
      <el-button class="mb-10 hvr-icon-bob" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Bob
      </el-button>
      <el-button class="mb-10 hvr-icon-hang" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Hang
      </el-button>
      <el-button class="mb-10 hvr-icon-wobble-horizontal" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Wobble Horizontal
      </el-button>
      <el-button class="mb-10 hvr-icon-wobble-vertical" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Wobble Vertical
      </el-button>
      <el-button class="mb-10 hvr-icon-buzz" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Buzz
      </el-button>
      <el-button class="mb-10 hvr-icon-buzz-out" size="large">
        <template #icon>
          <component class="hvr-icon" :is="Icons['Search']"></component>
        </template>
        Icon Buzz Out
      </el-button>
    </div>
    <h2 class="mb-10">Border Transitions</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-border-fade" size="large">border-fade</el-button>
      <el-button class="mb-10 hvr-hollow" size="large">hollow</el-button>
      <el-button class="mb-10 hvr-trim" size="large">trim</el-button>
      <el-button class="mb-10 hvr-ripple-out" size="large">ripple-out</el-button>
      <el-button class="mb-10 hvr-ripple-in" size="large">ripple-in</el-button>
      <el-button class="mb-10 hvr-outline-out" size="large">outline-out</el-button>
      <el-button class="mb-10 hvr-outline-in" size="large">outline-in</el-button>
      <el-button class="mb-10 hvr-round-corners" size="large">round-corners</el-button>
      <el-button class="mb-10 hvr-underline-from-left" size="large">underline-from-left</el-button>
      <el-button class="mb-10 hvr-underline-from-center" size="large"
        >underline-from-center</el-button
      >
      <el-button class="mb-10 hvr-underline-from-right" size="large"
        >underline-from-right</el-button
      >
      <el-button class="mb-10 hvr-overline-from-left" size="large">overline-from-left</el-button>
      <el-button class="mb-10 hvr-overline-from-center" size="large"
        >overline-from-center</el-button
      >
      <el-button class="mb-10 hvr-overline-from-right" size="large">overline-from-right</el-button>
      <el-button class="mb-10 hvr-reveal" size="large">reveal</el-button>
      <el-button class="mb-10 hvr-underline-reveal" size="large">underline-reveal</el-button>
      <el-button class="mb-10 hvr-overline-reveal" size="large">overline-reveal</el-button>
    </div>
    <h2 class="mb-10">Shadow and Glow Transitions</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-glow" size="large">glow</el-button>
      <el-button class="mb-10 hvr-shadow" size="large">shadow</el-button>
      <el-button class="mb-10 hvr-grow-shadow" size="large">grow-shadow</el-button>
      <el-button class="mb-10 hvr-box-shadow-outset" size="large">box-shadow-outset</el-button>
      <el-button class="mb-10 hvr-box-shadow-inset" size="large">box-shadow-inset</el-button>
      <el-button class="mb-10 hvr-float-shadow" size="large">float-shadow</el-button>
      <el-button class="mb-10 hvr-shadow-radial" size="large">shadow-radial</el-button>
    </div>
    <h2 class="mb-10">Speech Bubbles</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-bubble-top" size="large">bubble-top</el-button>
      <el-button class="mb-10 hvr-bubble-right" size="large">bubble-right</el-button>
      <el-button class="mb-10 hvr-bubble-bottom" size="large">bubble-bottom</el-button>
      <el-button class="mb-10 hvr-bubble-left" size="large">bubble-left</el-button>
      <el-button class="mb-10 hvr-bubble-float-top" size="large">bubble-float-top</el-button>
      <el-button class="mb-10 hvr-bubble-float-right" size="large">bubble-float-right</el-button>
      <el-button class="mb-10 hvr-bubble-float-bottom" size="large">bubble-float-bottom</el-button>
      <el-button class="mb-10 hvr-bubble-float-left" size="large">bubble-float-left</el-button>
    </div>
    <h2 class="mb-10">Curls</h2>
    <div class="mb-10">
      <el-button class="mb-10 hvr-curl-top-left" size="large">curl-top-left</el-button>
      <el-button class="mb-10 hvr-curl-top-right" size="large">curl-top-right</el-button>
      <el-button class="mb-10 hvr-curl-bottom-right" size="large">curl-bottom-right</el-button>
      <el-button class="mb-10 hvr-curl-bottom-left" size="large">curl-bottom-left</el-button>
    </div>
  </div>
</template>

<script setup>
import * as Icons from '@/config/icons'
console.log(1)
</script>

<style lang="scss" scoped>
@import url('./HoverCssView.scss');
</style>
